<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文章录入页面</title>
		<style type="text/css">
            #wrap{
                width: 1000px;
                margin: 0 auto;
            }
            h1{
                text-align:center;
                margin:50px 0;
            }
            .form-item-wrap{
                margin: 20px 0;
            }
            .form-item-wrap input{
                width:400px;
            }
            #post-content-editor{
                height:500px;
            }
            
            /**/
            .tag-item{
                padding: 0 10px;
                margin-right: 20px;
                border: 1px solid green;
                display: inline-block;
                height: 20px;
                line-height: 20px;
                border-radius: 5px;
                cursor: default;
                -webkit-user-select: none;
            }
        </style>
        <script>
            window.UEDITOR_HOME_URL = '/ueditor/';
        </script>
        <script type="text/javascript" src="ueditor/ueditor.config.js"></script>
        <script type="text/javascript" src="ueditor/ueditor.all.js"></script>
	</head>
	<body>
		<div id="wrap">
            <h1>发表新文章</h1>
            <div class="form-item-wrap">
                <label>文章标题：</label><input type="text" id="title-input" />
            </div>
            <div class="form-item-wrap">
                <label>文章内容：</label>
                <textarea name="post" id="post-content-editor"></textarea>
            </div>
            <div class="form-item-wrap">
                <label>文章摘要：</label>
                <textarea id="post-summery-input"></textarea>
            </div>
            <div class="form-item-wrap">
                <div><label>文章关键字：</label> <span id="keyword-con"></span></div>
                输入关键字(回车确认)：<input type="text" id="keyword-input" />
            </div>
            <div class="form-item-wrap">
                <label>文章封面图片地址：</label><input type="text" id="frontcover-input" />
                <form method="post" action="/blog/index.php?r=site/upload" enctype="multipart/form-data">
                    <input type="file" name="file" id="file" />
                    <input id="frontcover-upload-btn" type="button" value="确认上传" />
                </form>
            </div>
            <div class="form-item-wrap">
                <label>文章来源地址：</label><input type="text" id="source-input" />
            </div>
            <div class="form-item-wrap">
                <label>文章类型：</label>
                <select id="type-select">
                    <option value="1">全部</option>
                </select>
            </div>
            <div class="form-item-wrap">
                <label>是否发表：</label>
                <select id="post-publish-select">
                    <option value="1">发表</option>
                    <option value="0">不发表</option>
                </select>
            </div>
            
            <button id="submit-btn">保存</button>
        </div>
        
        
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
        <script>
        
            jQuery( function(){
                var $ = jQuery;
                
                var editor = new UE.ui.Editor( {
                    initialFrameHeight : 450
                });
                editor.render("post-content-editor");
                //1.2.4以后可以使用一下代码实例化编辑器
                //UE.getEditor('myEditor')
                
                
                var $titleEl = $('#title-input');
                var $summeryEl = $('#post-summery-input');
                var $keywordEl = $('#keyword-con');
                var $keywordInput = $('#keyword-input');
                var $coverEl = $('#frontcover-input');
                var $sourceEl = $('#source-input');
                var $typeEl = $('#type-select');
                var $publishEl = $('#post-publish-select');
                var $submitEl = $('#submit-btn');
                
                
                //用户在tag输入框中回车，添加新的tag
                $keywordInput.keyup( function(e){
                    var keyCode = e.keyCode;
                    if( keyCode === 13){
                        //回车
                        var value = $keywordInput.val().trim();
                        value = value.replace(',', '');
                        if( !value){
                            alert('关键字不能为空！');
                            return;
                        }
                        $('<span class="tag-item">' + value + '</span>').appendTo( $keywordEl );
                        $keywordInput.val('');
                    }
                });
                
                //双击tag，删除对应的tag
                $keywordEl.on( 'dblclick', '.tag-item', function(e){
                    var $target = $( e.target ); 
                    $target.remove();
                });
                
                //获取所有的tag，用 逗号 连接为一个字符串
                function getTags(){
                    var arr = [];
                    $keywordEl.find( '.tag-item').each( function( el ){
                        arr.push( $(this).text() );
                    } );
                    return arr.join(',');
                }
                
                
                $submitEl.click( postSubmit);
                
                //提交日志到服务器
                function postSubmit(){
                
                    $submitEl.attr( 'disabled', 'disabled');
                
                    var title = $titleEl.val().trim();
                    var summary = $summeryEl.val().trim();
                    var keywords = getTags();
                    var frontcover = $coverEl.val().trim();
                    var source = $sourceEl.val().trim();
                    var type = $typeEl.val().trim();
                    var publishStatus = $publishEl.val().trim();
                    var contents = editor.getContent();
                    
                    var data = {
                        title : title, 
                        source : source, 
                        summary : summary, 
                        keywords : keywords, 
                        frontcover : frontcover, 
                        type : type, 
                        contents : contents, 
                        classid : 0, 
                        publish : publishStatus
                    };
                    
                    var url = '/blog/index.php?r=site/addarticle';
                    
                    $.post( url, data ).done( function( str, jqXHR, status){
                        console.log( str );
                        alert('保存成功！');
                        //TODO
                        $submitEl.removeAttr( 'disabled');
                    }).fail( function( status, jqXHR ){
                        alert( '保存失败，联系开发人员');
                        $submitEl.removeAttr( 'disabled');
                    });
                }
            
            });

            //封面图片上传代码
            jQuery( function(){

                var $ = jQuery;
                var $frontcoverBtn = $('#frontcover-upload-btn');
                var $frontcoverInput = $('#frontcover-input');

                var frameIndex = 0;

                $frontcoverBtn.click( function(){

                    var form = this.parentNode;
                    var frame = document.createElement('iframe');
                    var frameID = 'upload-frame-' + frameIndex++;
                    frame.id = frameID;
                    frame.style.display = 'none';
                    document.body.appendChild( frame );
                    frame.onload = pictureUpload;
                    form.target = frameID;


                    form.submit();
                });

                function pictureUpload(){
                    var content = this.contentDocument.body.innerHTML;
                    console.log( content );
                    document.body.removeChild( this );
                    $frontcoverInput.val( content );
                }

            });
            
            
            
        </script>
	</body>
</html>